<template>
  <view :class="theme">
    <view class="tabs flex-row fixed bg-base">
      <label @click="switchTab(index)" v-for="(option, index) in options.list" :key="index"
        :class="[`color-${index === options.current ? `primary` : `placeholder`}`, `text-30 flex-1 justify-center fw-600`]"
        style="transition: all 0.3s linear; line-height: 100rpx;">
        {{ option.text }}
      </label>
      <view class="absolute bottom-12 w-36 h-4 bg-primary b-rounded-6"
        :style="{ transition: `left 0.3s linear`, transform: `translateX(-50%)`, left: `calc(100% / ${options.list.length} / 2 + 100% / ${options.list.length} * ${options.current})`, }" />
    </view>
    <view class="bg-section b-rounded-16" style="margin: 120rpx 20rpx 20rpx;">
      <view v-for="(item, index) in options.list[options.current].list" :key="item.log_sn || index"
        :style="{ borderTop: index ? `2rpx solid #131313` : `none` }"
        class="flex-row items-center ml-30 mr-30 pt-20 pb-20">
        <view class="flex-1">
          <text class="ellipsis text-28">{{ item.type || "-" }}</text>
          <text class="mt-12 text-20 color-placeholder">{{ item.create_at || "-" }}</text>
        </view>
        <text :class="`color-${{ 1: 'success', 2: 'error' }[item.state as '1' || '2'] || 'warning'} text-28 fw-700`">
          {{ { 1: "+", 2: "-" }[(item.state as 1 | 2)] || "" }}{{ Math.abs(Number(item.coin || 0)) || "0.00" }}
        </text>
      </view>
      <view class="mt-30 mb-30 items-center">
        <uv-image v-if="!options.list[options.current].list.length" :showLoading="false" width="400" height="400"
          class="mt-60 mb-30" src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="options.list[options.current].cache.status" icon-size="32" font-size="26"
          :is-dot="!!options.list[options.current].list.length" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const options = reactive({
  current: 0,
  list: [
    {
      text: "全部",
      page: 0,
      limit: 20,
      list: [] as any[],
      cache: {
        page: 1,
        list: [] as any[],
        status: "nomore",
      },
      next: false,
    },
    {
      text: "入账",
      page: 0,
      limit: 20,
      list: [] as any[],
      cache: {
        page: 1,
        list: [] as any[],
        status: "nomore",
      },
      next: false,
    },
    {
      text: "出账",
      page: 0,
      limit: 20,
      list: [] as any[],
      cache: {
        page: 1,
        list: [] as any[],
        status: "nomore",
      },
      next: false,
    },
  ],
});

const switchTab = (index: number) => {
  if (index === options.current) return;
  options.current = index;
  const option = options.list[options.current];
  option.page = 0;
  option.cache = {
    page: 1,
    list: [] as any[],
    status: "nomore",
  };
  uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  getData();
};

const billTypes = {
  "1": {
    api: "/coinLog",
    title: "龙珠",
  },
  "2": {
    api: "/moneyLog",
    title: "碎片"
  },
  "3": {
    api: "/energyLog",
    title: "仓库"
  },
};
let billKey = Object.keys(billTypes)[0] as keyof typeof billTypes;
onLoad(({ type }: any) => {
  type && (billKey = type);
  getData();
  uni.setNavigationBarTitle({ title: `${billTypes[billKey].title}明细` });
});

const getData = () => {
  pager(
    {
      url: billTypes[billKey].api,
      data: { status: options.current },
    },
    options.list[options.current]
  );
};

onReachBottom(() => getData());
</script>

<style lang="scss" scoped>
// scss
.tabs {
  left: var(--window-left);
  right: var(--window-right);
  top: var(--window-top);
}
</style>